<template>
	<view class="home">
		<!-- 	<view class="navabar">
			<u-icon name="arrow-left" size="18"></u-icon>
			<view class="" style="display: flex;">
				<view class="" style="margin-right: 18rpx;" @click="handleSareWx">
					爆款推荐
				</view>
				<u-icon name="question-circle" size="18"></u-icon>
			</view>
		</view> -->

		<view class="banner">
			<!-- <image src="../../static/image/banner.png" mode=""
				style="width: 100%;height: 100%;border-radius: 6rpx 6rpx 6rpx 6rpx;" /> -->

			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in bannerImg" style="height: 376rpx;">
					<image :src="item.img_url" mode=""
						style="width: 100%;height: 376rpx;border-radius: 6rpx 6rpx 6rpx 6rpx;" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 	<view class="" @click="handlewx" style="height: 100rpx;line-height: 100rpx;background-color: pink;">
			111111111111
		</view>
		<view class="" @click="handlepyq" style="height: 100rpx;line-height: 100rpx;">
			22222222222
		</view> -->

		<view class="gongao" @click="handleGG">
			<u-notice-bar :text="text1" bgColor="#ffffff" color="#359691"></u-notice-bar>
		</view>

		<view class="TypeBox">

			<view class="itemBox" @click="handleAuthentication">
				<image src="../../static/image/wdrz.png" style="width: 50rpx;height: 50rpx;margin-top: 14rpx;"></image>
				<view class="" style="margin-top: 10rpx;">
					我的认证
				</view>
			</view>
			<view class="itemBox" @click="handleMyinvite">
				<image src="../../static/image/wdyq.png" style="width: 50rpx;height: 50rpx;margin-top: 14rpx;"></image>
				<view class="" style="margin-top: 10rpx;">
					我的邀请
				</view>
			</view>
			<view class="itemBox" @click="handleMyOrder">
				<image src="../../static/image/wddd.png" style="width: 50rpx;height: 50rpx;margin-top: 14rpx;"></image>
				<view class="" style="margin-top: 10rpx;">
					我的订单
				</view>
			</view>
			<view class="itemBox" @click="handleMyResell">
				<image src="../../static/image/wdzs.png" style="width: 50rpx;height: 50rpx;margin-top: 14rpx;"></image>
				<view class="" style="margin-top: 10rpx;">
					我的仓库
				</view>
			</view>

		</view>


		<view class="prefecture">
			<view class="prefectureLeft">
				<image src="../../static/image/pm.png" mode="" style="width: 34rpx;height: 32rpx;margin-right: 12rpx;">
				</image>
				<view class="" style="color: #359691;">
					抢购专区
				</view>
			</view>
		</view>

		<view class="indexListbox">
			<view class="indexitem" v-for="(item,index) in indexList" :class="{indexitemed : currIndex == index}"
				@click="handleCurrindex(item,index)">
				{{item.warehouse_name}}
			</view>

		</view>

		<view v-if="totalPage" class="pageBox">
			<view class="pageItem" v-for="(item,index) in totalPage" :class="{pageItemed: index == pageCurrindex}"
				@click="handlePageData(index)">
				<text style="font-size: 33rpx;">{{index+1}}</text>页
			</view>
			<!-- <view class="pageItem" style="width: 120rpx;">
				查看全部
			</view> -->
		</view>

		<view v-if="dataList.length>0" class="dataListBox">
			<view class="dataListItem" v-for="(item,index) in showData" @click="handleGoDetail(item)">
				<view class="dataListItemtop">
					<image :src="item.image" mode=""
						style="width: 340rpx; height: 282rpx;border-radius: 6rpx 6rpx 0rpx 0rpx;"></image>
					<view v-if="item.buyFlg == 0 && item.status == 0" class="zz">
						未开始
					</view>
					<view v-if="item.buyFlg == 1 && item.status == 0" class="zz"
						style="display: flex;align-items: center;padding-left: 30rpx;box-sizing: border-box;">
						倒计时： <u-count-down :time="item.time" format="HH:mm:ss"
							@finish="finishTime(index)"></u-count-down>
					</view>
					<view v-if="item.buyFlg == 2 && item.status == 0" class="zz">
						已开始
					</view>
					<view v-if="item.buyFlg == 3" class="zz">
						已结束
					</view>
				</view>
				<view class="dataListItemBottom">
					<view class="name">
						{{item.name}}
					</view>
					<view class="price">
						￥{{item.all_price}}
					</view>
				</view>


				<view v-if="item.status > 0" class="outzz">
					<image src="@/static/image/sx.png" mode="" style="width: 200rpx;height: 200rpx;margin-top: 30rpx;
					margin-left: 70rpx;"></image>
				</view>
			</view>

		</view>


		<view v-else class="" style="margin-top: 30rpx;">
			<u-empty mode="data" text="暂无拍卖">
			</u-empty>

		</view>

		<view class="" style="height: 200rpx;"></view>


	</view>
</template>

<script>
	import {
		banner,
		notice,
		goodsIndex,
		getsettings,
		indexlist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				text1: "",
				currIndex: 0,
				bannerImg: [],
				dataList: [],
				changciFlag: 7,
				buyFlg: 0, // 0未开始  1倒计时  2可以购买
				time: null,
				indexList: [],
				dataId: null,
				timeValue: "",
				changciChuo: null,
				currentChuo: null,
				currentPage: 1, // 当前页码
				pageSize: 20, // 每页显示的数据条数
				totalPage: 0,
				pageCurrindex: 0,
				showData: [],
				endTime: null,
				pageNum: 1,
			}
		},
		onLoad() {

			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			this.handleindexlist()
			this.handleGetbanner()
			this.handleGetnotice()
			// this.handlegetgoodsIndex()
			// this.handlegetsettings()
			// console.log("分页计算", Math.ceil(21 / 20))
		},
		onShow() {
			this.handlegetgoodsIndex()
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
				this.handlegetgoodsIndex()
		},
		methods: {
			handlewx() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession", //朋友
					href: " http://www.jinsekeji.com.cn/#/",
					type: 2,
					imageUrl: this.bannerImg[0],
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			handlePageData(index) {
				this.pageCurrindex = index
				this.currentPage = index + 1
				this.pageNum = index + 1
				this.handlegetgoodsIndex()
				// this.getDataList()
			},
			getDataList() {
				// 根据当前页码和每页显示的数据条数计算起始索引和结束索引
				// this.startIndex = (this.currentPage - 1) * this.pageSize;
				// this.endIndex = this.currentPage * this.pageSize;

				// 获取数据源，这里假设是从一个数组中获取数据

				// 根据起始索引和结束索引截取数据并更新数据列表
				// this.showData = this.dataList.slice(this.startIndex, this.endIndex);
				this.showData = this.dataList
				console.log("222222222222222222", this.showData)
			},
			finishTime(index) {
				console.log("倒计时结束3333333333", index)
				this.dataList[index].buyFlg = 2
				this.$forceUpdate()
				// this.buyFlg = 2
			},
			async handleindexlist() {
				let res = await indexlist()
				this.indexList = res.data
				this.dataId = this.indexList[0].id
				this.timeValue = this.indexList[0].begin_time
				this.endTime = this.indexList[0].end_time
				this.handlegetgoodsIndex()
				console.log("用户场次", this.timeValue)
			},

			async handlegetgoodsIndex() {
				let res = await goodsIndex({
					type: this.dataId,
					page: this.pageNum
				})
				uni.stopPullDownRefresh();
				// console.log("拍卖专区", res)
				if (res.data.data) {
					this.dataList = res.data.data
					this.totalPage = Math.ceil(res.data.total / this.pageSize)
					// console.log("页数", this.totalPage)
					this.dataList.forEach((item, index) => {
						// console.log("测试倒计时")
						if (new Date().getTime() < new Date(item.up_time).getTime()) {
							// console.log("33333333不在同一天")
							item.buyFlg = 0
						} else {
							this.currentChuo = new Date().getTime()
							var currentTime = new Date(this.currentChuo).toLocaleString()
							// var changciTime = this.timeValue
							var changciTime = item.begin_time
							// console.log("?????????", changciTime)
							this.changciChuo = new Date(changciTime).getTime()
							item.changciChuo = this.changciChuo
							// console.log("555555555", this.currentChuo, this.changciChuo, currentTime,
							// 	changciTime)
							if (this.currentChuo < this.changciChuo) {
								var timeDiff = this.changciChuo - this.currentChuo;
								this.shi = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
								this.fen = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
								this.miao = Math.floor((timeDiff % (1000 * 60)) / 1000);
								if (this.shi ==0 && this.fen <= 30) {
									item.buyFlg = 1
									item.time = timeDiff
									// console.log("30分倒计时",this.shi, this.fen,item.time)
								} else {
									item.buyFlg = 0
									// console.log("未开始")
								}
							} else {
								// var endcurrentChuo = this.endTime.getTime()
								var endTimechuo = new Date(item.end_time).getTime()
								// console.log("ttttttttt", endTimechuo)
								if (this.currentChuo > endTimechuo) {
									item.buyFlg = 3
								} else {
									item.buyFlg = 2
								}
								// console.log("已开始，可以购买")
							}

						}
					})
					this.getDataList()
				} else {
					this.totalPage = 0
					this.dataList = []
				}

				// this.handlegetsettings()
			},
			async handlegetsettings() {
				// console.log("00000000", this.timeValue)
				this.currentChuo = new Date().getTime()
				var currentTime = new Date(this.currentChuo).toLocaleString()
				var changciTime = this.timeValue
				this.changciChuo = new Date(changciTime).getTime()
				// console.log("555555555", this.currentChuo, this.changciChuo, currentTime, changciTime)
				if (this.currentChuo < this.changciChuo) {
					var timeDiff = this.changciChuo - this.currentChuo;
					this.shi = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					this.fen = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
					this.miao = Math.floor((timeDiff % (1000 * 60)) / 1000);
					if (this.fen <= 30) {
						// console.log("30分倒计时")
						this.buyFlg = 1
						this.time = timeDiff
					} else {
						this.buyFlg = 0
						// console.log("未开始")
					}
					console.log("hours", this.shi, this.fen, this.miao)
				} else {
					this.buyFlg = 2
					// console.log("已开始，可以购买")
				}
			},
			handleCurrindex(item, index) {
				console.log("场次", item)
				this.currIndex = index
				this.pageCurrindex = 0
				this.pageNum = 1
				this.dataId = item.id
				this.timeValue = item.begin_time
				this.endTime = item.end_time
				this.handlegetgoodsIndex()
			},
			timestampToTime(value) {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				// m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				// d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				var minute = date.getMinutes();
				// minute = minute < 10 ? ('0' + minute) : minute;
				var second = date.getSeconds();
				// second = second < 10 ? ('0' + second) : second;
				return y + '/' + m + '/' + d + ' ' + value;
				// return y + '/' + m + '/' + d + ' ' + '23:30';
			},
			handleGG() {
				uni.navigateTo({
					url: "./announcementList"
				})
			},
			handleAuthentication() {
				uni.navigateTo({
					url: "./authentication"
				})
			},
			handleMyinvite() {
				uni.navigateTo({
					url: "./myInvite"
				})
			},
			handleGoDetail(item) {
				if (item.status > 0) {
					uni.showToast({
						title: "该商品已售罄！",
						icon: "none",
						duration: 1500
					});
					return
				}
				if (item.buyFlg == 3) {
					uni.showToast({
						title: "该商品抢购已结束！",
						icon: "none",
						duration: 1500
					});
					return
				}
				let data = {
					id: item.id,
					buyFlg: item.buyFlg,
					changciChuo: item.changciChuo
				}
				uni.navigateTo({
					url: `./detail?detail=${JSON.stringify(data)}`
				})
			},
			handleMyOrder() {
				uni.navigateTo({
					url: "./myOreder"
				})
			},
			handleMyResell() {
				uni.navigateTo({
					url: "./myResell"
				})
			},

			handleSareWx() {
				var weixinShare = null;
				plus.share.getServices(function(services) {
					for (var i in services) {
						var service = services[i];
						// 获取微信分享对象 
						if (service.id == 'weixin') {
							weixinShare = service;
							break;
						}
					}
					weixinShare.send({
						content: 'https://www.pgyer.com/aZsMsq'
					}, function() {
						// 分享成功 
					}, function(err) {
						// 分享操作失败  
						// err.code是错误码
					})
				}, function(err) {
					// 获取 services 失败
				})
			},
			//banner图
			async handleGetbanner() {
				let res = await banner()
				// console.log("banner", res)
				this.bannerImg = res.data
			},
			//公告
			async handleGetnotice() {
				let res = await notice()
				// console.log("公告",res)
				this.text1 = res.data[0].title
			},
		}
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;

		.pageItem {
			width: 80rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1rpx solid #359691;
			color: #C2C2C2;
			font-size: 28rpx;
			margin-bottom: 10rpx;

		}

		.pageItem:nth-child(1) {
			border-radius: 10rpx 0 0 10rpx;
		}

		.pageItem:last-child {
			border-radius: 0 10rpx 10rpx 0;
		}

		.pageItemed {
			background: #359691;
			color: #ffffff;
		}
	}

	.indexListbox {
		width: 100%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		display: flex;

		.indexitem {
			width: 180rpx;
			height: 62rpx;
			opacity: 1;
			border: 2rpx solid #359691;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #C2C2C2;
			line-height: 62rpx;
			text-align: center;
		}

		.indexitem:nth-child(1) {
			border-radius: 10rpx 0 0 10rpx;
		}

		.indexitem:last-child {
			border-radius: 0 10rpx 10rpx 0;
		}

		.indexitemed {
			background: #359691;
			color: #ffffff;
			font-weight: 600;
			font-size: 32rpx;
		}
	}

	::v-deep .u-count-down__text {
		color: #fff !important;
	}

	.swiper {
		width: 100%;
		height: 376rpx;
	}

	.home {
		.navabar {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #A4A4A4;
			line-height: 28rpx;
			margin-top: 62rpx;
		}

		.banner {
			width: 100%;
			height: 376rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 28rpx;
		}

		.gongao {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
		}

		.TypeBox {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-top: 22rpx;

			.itemBox {
				width: 160rpx;
				height: 136rpx;
				background: #FFFFFF;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 40rpx;
			}
		}

		.prefecture {
			width: 300rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			margin-top: 26rpx;
			text-align: center;

			.prefectureLeft {
				display: flex;
				align-items: center;
				font-size: 35rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.prefectureRight {
				display: flex;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				border: 2rpx solid #359691;
				color: #C2C2C2;
				border-radius: 10rpx;
				overflow: hidden;

				.item {
					width: 120rpx;
					height: 40rpx;
					opacity: 1;
					text-align: center;
				}

				.itemed {
					background: #359691;
					color: #ffffff;
				}
			}
		}


		.dataListBox {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 26rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;

			.outzz {
				width: 340rpx;
				height: 386rpx;
				background: rgba(0, 0, 0, 0.7);
				position: absolute;
				top: 0;
				box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
				border-radius: 6rpx 6rpx 6rpx 6rpx;

			}

			.dataListItem {
				width: 340rpx;
				height: 386rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-bottom: 24rpx;
				position: relative;

				.dataListItemtop {

					.zz {
						position: absolute;
						width: 288rpx;
						height: 50rpx;
						background: rgba(0, 0, 0, 0.6);
						box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
						bottom: 104rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 50rpx;
						text-align: center;
					}
				}

				.dataListItemBottom {
					width: 100%;
					padding: 0 16rpx;
					box-sizing: border-box;

					.name {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 28rpx
					}

					.price {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>